<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style>
        body{
            background-attachment:fixed;
            background-image:url('1.png');
            background-repeat:no-repeat;
        }
        /*背景*/
        p {
            background-color:#b0c4de;   /*背景颜色 rgb(255,0,0)  red  */
     /*
            background-attachment
            */
        }
        div{
            background-image:url('1.png'); /*默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.*/
           /* background-repeat:repeat-x;*//*只在水平方向平铺 (repeat-x)*/
            background-repeat:no-repeat;/*只不想让图像平铺*/
            background-position:right top; /*属性改变图像在背景中的位置*/

        }

     /*   简写属性
                属性值的顺序为:
                    background-color
                    background-image
                    background-repeat
                    background-attachment   背景图像是否固定或者随着页面的其余部分滚动。
                    background-position

     */
        .bac {background:#ffffff url('1.png') no-repeat right top;}
    </style>
</head>
<body>
<p>该段落有自己的背景颜色。</p>
<div style="height: 400px">该段落有自己的背景颜色。</div>
<div class="bac" style="height: 200px">该段己的背景颜色。</div>

<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
</body>
</html>